<template>

<div class="info-item" :class='type'>

    <span class="title">
        {{label}}
    </span>

    <div class="content">

        <ul>
            <li v-for='(key, index) of keys' :key='key'>
               <h4>
                    {{data[key] || '无'}}
               </h4>
            </li>
        </ul>
        
    </div>

</div>

</template>

<script lang='ts'>
import { Component, Prop, Watch, Vue } from 'vue-property-decorator'

@Component({})
export default class infoItem extends Vue{
    name:string = 'info-item'

    @Prop()
    data

    @Prop()
    keys:string[]
    
    @Prop()
    label:string

    @Prop({
        default: 'default'
    })
    type: 'inline' | 'default'
    
}

</script>

<style scoped lang='scss'>

.info-item + .info-item{
    margin-top: _intervals(2);
}

.info-item{

    .title{
        display: block;
        color: $font_secondary;
    }
    h4{
        // @extend %text_overflow;
        font-size: $font-small;
    }
    
    .content{
        margin-top: _rem(6px);
        ul{
            display: flex;
            align-items:center;
        }

        li {
            overflow: hidden;
        }
    }
    .content li + li{
        margin-left: _rem(6px);
    }

}

.info-item.inline{
    display: flex;
    align-items: center;

    .title{
        margin-right: _rem(6px);
    }

    .content{
        margin: 0;
    }
    
}


</style>